<template>
  <div class="blob animated look-left look-up">
    <div class="eyes">
      <div class="eye left-eye"></div>
      <div class="eye right-eye"></div>
    </div>
    <div class="mouth"></div>
  </div>

</template>
<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'

onMounted(() => {
  const animationType = 'headShake'
  const blob = document.querySelectorAll('.blob')[0];
  const body = document.getElementsByTagName('body')[0];

  blob.addEventListener('mouseenter', () => {
    blob.classList.add(animationType);
  });

  blob.addEventListener('mouseleave', () => {
    blob.classList.remove(animationType);
  });

  body.addEventListener('mousemove', (e) => {
    if (e.clientY < blob.offsetHeight) {
      blob.classList.add('look-up');
    } else {
      blob.classList.remove('look-up');
    }

    if (e.clientY > (blob.offsetHeight + 50)) {
      blob.classList.add('look-down');
    } else {
      blob.classList.remove('look-down');
    }


    if (e.clientX < (blob.offsetLeft)) {
      blob.classList.add('look-left');
    } else {
      blob.classList.remove('look-left');
    }

    if (e.clientX > (blob.offsetLeft + 35)) {
      blob.classList.add('look-right');
    } else {
      blob.classList.remove('look-right');
    }
  });
})

</script>
<style scoped lang='scss'>
.blob {
  --eye-height: 15%;
  --left-eye-x: 30%;
  --right-eye-x: 60%;
  background-color: transparent;
  height: 100%;
  width: 100%;
  // background-color: hsl(100, 50%, 80%);
  background-color: #fffb53;
  position: relative;
  border-radius: 15px;
  box-shadow: 5px 5px 10px hsl(0, 0%, 0%);
  cursor: pointer;
  border: 2px solid black;
}

.blob * {
  position: absolute;
}

.eyes {
  top: var(--eye-height);
  transition: 0.10s;
  position: relative
}

.mouth,
.eye {
  background-color: hsl(0, 0%, 25%);
}

.eye {
  position: absolute;
  height: .6rem;
  width: .6rem;
  border-radius: 100%;
  transition: 0.10s;
}

.left-eye {
  left: var(--left-eye-x);
}

.right-eye {
  left: var(--right-eye-x);
}

.mouth {
  bottom: 20%;
  height: 10%;
  width: 45%;
  right: 25%;
  border-radius: 0 0 100% 100%;
}

.blob:hover .eye {
  height: 4px;
  border-radius: 0;
}

.blob:hover .eyes {
  top: 15%;
}

.blob.look-up .eyes {
  top: (var(--eye-height));
}

.blob.look-down .eyes {
  top: (var(--eye-height))
}

.blob.look-left .left-eye {
  left: (var(--left-eye-x));
}

.blob.look-left .right-eye {
  left: (var(--right-eye-x));
}


.blob.look-right .left-eye {
  left: (var(--left-eye-x));
}

.blob.look-right .right-eye {
  left: (var(--right-eye-x));
}
</style>